
//尝试发送请求,获取统计数据
axios.get('/dashboard').then(({ data: res }) => {
    // console.log(res);
    // groupData  每组的薪资(柱状图那里)
    //overview  最上个面的四个盒子用
    // provinceData  地图用
    //salaryData  饼图用
    // year  折线图用

    //解构方案一(必须掌握)
    // let {message,data:{groupData,overview}}=res
    // 解构方案二(必须掌握)
    let { groupData, overview, provinceData, salaryData, year } = res.data;
    // document.querySelector('[name="student_count"]').innerHTML = overview.student_count;
    // document.querySelector('[name="age"]').innerHTML = overview.age;
    // document.querySelector('[name="group_count"]').innerHTML = overview.group_count;
    //因为有规律,所以用 for in
    for (let key in overview) {
        // console.log(key);
        document.querySelector(`[name="${key}"]`).innerHTML = overview[key];
    }
    linchart(year)
    classSalaryChart(salaryData)
    money(groupData)
    bing(salaryData)
    geoMp(provinceData)
})











//--------------折线图: 全学科薪资走势----------------
//1.得有盒子(页面布局已经有了  id= 'line')
//2.引入echarts.min.js(已经引入)

function linchart(data) {
    // console.log(data);

    //3.初始化 echats
    let myChart = echarts.init(document.querySelector('#line'))
    //4.配置项
    let option = {
        title: {
            //标题
            text: '2022全学科薪资走势',

            //颜色,文字大小

            textStyle: {
                fontSize: 16,
            },
            //距离顶部位置

            left: 10,
            top: 15,
        },
        xAxis: {
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: data.map(item => item.month),
            //X轴上的文字
            axisLabel: {

                color: '#999',
            },

            //轴线

            axisLine: {

                lineStyle: {
                    color: '#ccc',
                    type: 'dotted',
                },
            },
        },
        yAxis: {

            type: 'value',
            //Y轴分割线

            splitLine: {
                lineStyle: {

                    type: 'dotted',
                },
            },
        },
        //鼠标移入提示

        tooltip: {
            trigger: 'axis',
        },

        //网格

        grid: {
            top: '20%',
        },

        //颜色设置
        // color: ['颜色1','颜色2'],
        color: {
            type: 'linear',  //简便的类型,此处表示线性渐变
            x: 0,  //坐标,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            },

            {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },

        series: [
            {
                // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
                data: data.map(item => item.salary),
                type: 'line',
                smooth: true,  //平滑线条


                //线条样式
                lineStyle: {
                    width: 6,
                },
                //线条标记大小

                symbolSize: 10,

                //区域样式
                areaStyle: {
                    color: {
                        type: 'linear',  //简便的类型,此处表示线性渐变
                        x: 0,  //坐标,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#499FEE' // 0% 处的颜色
                        },
                        {
                            offset: 0.8, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
                        },
                        {
                            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                },
            },


        ],

    };
    //5.创建图表
    myChart.setOption(option);

}








//--------------饼图: 班级薪资分布(右上角)----------------
function classSalaryChart(data) {
    //    console.log(data);
    //     let dat = data.map(item => {
    //         return {
    //             value: item.label,
    //             name:item.g_count + item.b_count
    //         } 
    //     })
    //     console.log(dat);
    let myChart = echarts.init(document.querySelector('#salary'));
    let option = {
        //标题配置
        title: {
            //标题
            text: '班级薪资分布',

            //颜色,文字大小

            textStyle: {
                fontSize: 16,
            },
            //距离顶部位置

            left: 10,
            top: 15,
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '6%',
            left: 'center'
        },
        series: [
            {
                name: '班级薪资分布',
                type: 'pie',  //表示是饼图
                center: ['50%', '50%'],  //中心点坐标
                radius: ['50%', '64%'], //内外圈半径
                //avoidLabelOverlap: false,

                //每个扇形区域样式
                itemStyle: {
                    borderRadius: 10, //圆角
                    borderColor: '#fff', //边框颜色
                    borderWidth: 2, //边框大小
                },
                label: {
                    show: false,  //每个扇形段的描述文字,不显示
                    // position: 'center' //控制字显示在哪里
                },
                // emphasis: {
                //   label: {
                //     show: true,
                //     fontSize: '40',
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: {
                    show: false  //标签文字引导线,不需要
                },

                // data: [
                //     { value: 1048, name: '1万以下' },
                //     { value: 735, name: '1-1.5万' },
                //     { value: 580, name: '1.5-2万' },
                //     { value: 484, name: '2万以上' },

                // ],
                data: data.map(item => {
                    return {
                        name: item.label,
                        value: item.g_count + item.b_count
                    }
                }),
                color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
            }
        ]
    };
    myChart.setOption(option)
}


//--------------柱状图: 每组薪资----------------
let haha
let heihei
let aoao
function money(data) {
    console.log(data);
    //    for (const key in data) {
    //       haha=  data[key].map(item => {
    //           return item.name
    //      })
    //     //    console.log(haha);
    //     }
    //     for (const key in data) {
    //         heihei=  data[key].map(item => {
    //             return item. hope_salary
    //        })
    //          console.log(heihei);
    //       }
    //       for (const key in data) {
    //         aoao=  data[key].map(item => {
    //             return item.salary
    //        })
    //          console.log(aoao);
    //       }


    let myChart = echarts.init(document.querySelector('#lines'))
    let option = {

        //网格
        grid: {
            left: 70,
            top: 30,
            right: 30,
            bottom: 50,
        },
        //鼠标移入
        tooltip: { trigger: 'axis', },
        xAxis: {
            type: 'category',
            // data: haha,
            data: data[1].map(item => item.name),
            //轴线颜色,类型
            axisLine: {
                lineStyle: {
                    color: '#ccc',

                    type: 'dashed',
                },
            },
            //下面X轴文字颜色
            axisLabel: {
                color: '#999',
            },
        },
        yAxis: {
            type: 'value',
            //Y轴线得颜色
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                },
            },
        },
        series: [
            {
                // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
                // data:heihei,
                data: data[1].map(item => item.hope_salary),
                type: 'bar',

                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#34D39A' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },

            },
            {
                // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
                // data:aoao,
                data: data[1].map(item => item.salary),
                type: 'bar',
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#499FEE' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },

            }
        ],
    };
    myChart.setOption(option);







    document.querySelector('#btns').addEventListener('click', (e) => {
        if (e.target.tagName === 'BUTTON') {
            let i = e.target.innerHTML

            document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
            option.xAxis.data = data[i].map(item => item.name)
            option.series[0].data = data[i].map(item => item.name)
            option.series[1].data = data[i].map(item => item.name)
        }

    })

}
//--------------左下饼图: 男女薪资分布----------------
function bing(data) {
    // console.log(data);
    // let dat = data.map(item => {
    //     return {
    //         value: item.b_count,
    //         name: item.label,

    //     }
    // })
    // console.log(dat);
    let myChart = echarts.init(document.querySelector('#gender'))
    let option = {
        //标题配置
        title: [
            {
                text: '男女薪资分布',
                textStyle: {
                    fontSize: 16,
                },
                left: 10,
                top: 10,
            },
            {
                text: '男生',
                textStyle: {
                    fontSize: 16,
                },
                left: '45%',
                top: '45%',
            },
            {
                text: '女生',
                textStyle: {
                    fontSize: 16,
                },
                left: '45%',
                top: '85%',
            },
        ],
        tooltip: {
            trigger: 'item'
        },
        // legend: {
        //     bottom: '5%',
        //     left: 'center'
        // },
        //颜色设置
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['20%', '30%'],

                center: ['50%', '30%'],

                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },

                // data: [
                //     // { value: 1048, name: '1万以下' },
                //     { value: 235, name: '1万-2万' },
                //     { value: 580, name: '1.5万-2万' },
                //     { value: 484, name: '2万以上' }
                // ]
                data: data.map(item => {
                    return {
                        value: item.b_count,
                        name: item.label,

                    }
                })
            },
            {
                name: 'Access From',
                type: 'pie',
                radius: ['20%', '30%'],

                center: ['50%', '70%'],

                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },

                // data: [
                //     { value: 1048, name: '1万以下' },
                //     { value: 235, name: '1万-2万' },
                //     { value: 580, name: '1.5万-2万' },
                //     { value: 484, name: '2万以上' }
                // ]
                data: data.map(item => {
                    return {
                        value: item.g_count,
                        name: item.label,

                    }
                })
            }
        ]
    };
    myChart.setOption(option)
}

// ------------- 地图 : 籍贯分布---------------------
//做任何图形,最重要的,必须有的配置项是?  答案: 系列数据
function geoMp(data) {
    //准备好map使用的数据
    const mapData = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 }
    ];

    mapData.forEach(item => {
        let res = data.find(v => {
            return v.name.includes(item.name)
        });
        if (res) {
            item.value=res.value
        }
    })
    let myChart = echarts.init(document.querySelector('#map'));
    let option = {
        //鼠标移入提示
        //trigger:'item'. //axis
        tooltip: {
            formatter: '{b}: {c}位学员',  //格式化[自定义格式]
            //调整样式

            backgroundColor: 'rgba(0,0,0,0.5)',
            borderColor: 'transparent',
            textStyle: {
                color: '#fff',
            },

        },


        //设置标题

        title: {
            //标题
            text: '籍贯分布',

            //颜色,文字大小

            textStyle: {
                fontSize: 16,
            },
            //距离顶部位置

            left: 10,
            top: 10,
        },

        //设置地图

        series: [{
            name: '籍贯分布', // 添加系列数据的名字（和鼠标移入的提示有关系）
            type: 'map',
            map: 'china', // 具体是什么地图
            // 显示文本标签（每个区域、每个省的名字）
            label: {
                show: true,
                color: 'rgba(0, 0, 0, 0.7)',
                fontSize: 10
            },
            // 每个区域（省）【默认】的样式
            itemStyle: {
                areaColor: '#E0FFFF',
                borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            // 高亮状态，每个区域的配置
            emphasis: {
                // 高亮状态下（鼠标移入状态，或者选中状态下）
                itemStyle: {
                    areaColor: '#34D39A',
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            // 每个区域的数据
            data: mapData
        }],

        //视觉映射

        visualMap: {
            type: 'continuous', // continuous表示连续型； piecewise表示分段式
            min: 0,
            max: 10, // 看每个地区的学员多少，再来决定
            inRange: {
                color: ['#fff', '#0075F0']
            },
            text: [10, 0], // 两端的文字
            left: 40,
            bottom: 20,

        },





    }
    myChart.setOption(option)
}

